<template>
	<view class="uni-container">
		<uni-forms>
			<uni-forms-item label="购买用户:">
				<view class="mt9">{{formData.usname[0]}}</view>
			</uni-forms-item>
			<uni-forms-item label="订单状态:">
				<view class="mt9">
					{{formData.status == -1?'已关闭':(formData.status == 0?'待付款':(formData.status == 1?'待发货':(formData.status == 2?'已部分退款':(formData.status == 3?'已全额退款':(formData.status == 4?'待收货':(formData.status == 5?'待评价':(formData.status == 6?'退款中...':'已完成')))))))}}
				</view>
			</uni-forms-item>
			<uni-forms-item label="支付描述:">
				<view class="mt9" style="color: #ff0000;">{{formData.description}}</view>
			</uni-forms-item>
			<uni-forms-item label="系统单号">
				<view class="mt9">{{formData.order_no}}</view>
			</uni-forms-item>
			<uni-forms-item label="微信单号">
				<view class="mt9">{{formData.transaction_id}}</view>
			</uni-forms-item>
			<uni-forms-item label="商品信息">
				<view class="hx" v-for="(item,index) in formData.goods_arr" :key="index">
					<view>
						<image class="gsimg" :src="item.goods_img"></image>
					</view>
					<view class="gsinfo">
						<view class="gsname">{{item.goods_name}}</view>
						<view style="margin-top: 8px;">
							<text class="gssuk" v-for="suk in item.goods_suk">{{suk}}</text>
						</view>
						<view class="gssunu">
							<view class="gssuk">
								<text class="gsnum">{{item.goods_price /100 + '元'}}</text>
							</view>
							<text class="gsnum">×{{item.goods_num}}</text>
						</view>
					</view>
				</view>
			</uni-forms-item>
			<uni-forms-item label="原始金额">
				<view class="mt9">{{formData.origprice/100 + '元'}}</view>
			</uni-forms-item>
			<uni-forms-item label="使用优惠">
				<text class="mt9" style="margin-right: 8px;line-height: 35px;"
					v-for="youhui in formData.preferential">{{youhui.name}}</text>
			</uni-forms-item>
			<uni-forms-item label="优惠金额">
				<view class="mt9">{{formData.deduprice/100 + '元'}}</view>
			</uni-forms-item>
			<uni-forms-item label="运费">
				<view class="mt9">{{formData.freight/100 + '元'}}</view>
			</uni-forms-item>
			<uni-forms-item label="支付金额">
				<view class="mt9">{{formData.total_fee/100 + '元'}}</view>
			</uni-forms-item>
			<uni-forms-item label="退款金额">
				<view class="mt9">{{formData.refund_fee/100 + '元'}}</view>
			</uni-forms-item>
			<uni-forms-item label="退款原因">
				<view class="mt9">
					{{formData.status == 6?formData.refund_list[0]:(formData.status == 2 || formData.status == 3?formData.refund_list[1]:'')}}
				</view>
			</uni-forms-item>
			<uni-forms-item label="收货地址:">
				<view class="mt9">{{formData.address}}</view>
			</uni-forms-item>
			<uni-forms-item label="订单备注">
				<view class="mt9">{{formData.notes == ''?'无备注':formData.notes}}</view>
			</uni-forms-item>
			<uni-forms-item v-if="formData.shippingInfo" label="发货信息">
				<view class="mt9">
					{{'物流公司：' + formData.shippingInfo.loginame}}
				</view>
				<view class="mt9">
					{{'快递单号：' + formData.shippingInfo.loginum}}
				</view>
			</uni-forms-item>
			<uni-forms-item label="下单时间">
				<view class="mt9">
					<uni-dateformat :threshold="[0, 0]" :date="formData.create_date"></uni-dateformat>
				</view>
			</uni-forms-item>
			<uni-forms-item label="支付时间">
				<view class="mt9">
					<uni-dateformat :threshold="[0, 0]" :date="formData.pay_date"></uni-dateformat>
				</view>
			</uni-forms-item>
		</uni-forms>
	</view>
</template>

<script>
	const db = uniCloud.database();
	const dbCollectionName = 'uni-pay-orders,uni-id-users';
	export default {
		data() {
			return {
				formData: [],
			}
		},
		onLoad(e) {
			if (e.id) {
				const id = e.id
				this.formDataId = id
				this.getDetail(id)
			}
		},
		methods: {
			/**
			 * 获取表单数据
			 * @param {Object} id
			 */
			getDetail(id) {
				uni.showLoading({
					mask: true
				})
				db.collection(dbCollectionName).doc(id).field(
						"user_id.nickname as usname,description,address,status,goods_arr,origprice,preferential,total_fee,notes,deduprice,freight,shippingInfo,order_no,transaction_id,refund_fee,refund_list,create_date,pay_date"
					).get()
					.then((
						res) => {
						const data = res.result.data[0]
						if (data) {
							this.formData = data

						}
					}).catch((err) => {
						uni.showModal({
							content: err.message || '请求服务失败',
							showCancel: false
						})
					}).finally(() => {
						uni.hideLoading()
					})
			}
		}
	}
</script>
<style>
	.mt9 {
		margin-top: 9px;
	}

	.hx {
		display: flex;
		flex-direction: row;
	}

	.gsimg {
		width: 100px;
		height: 100px;
		border-radius: 10px;
		margin-right: 10px;
	}

	.gsinfo {}

	.gsname {
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.gssunu {
		display: flex;
		margin-top: 35px;
	}

	.gssuk {
		font-size: 13px;
		color: #919191;
		flex: 1;
		margin-right: 6px;
	}

	.gsnum {
		font-size: 16px;
		color: #ff007f;
	}
</style>